<style>

    .el-tree-node__content {
        height: auto;
    }

    span.role-menu-tree-node {
        margin-left: 10px;
        display: flex;
        align-items: center;
    }

    .role-menu-tree-node .node-name {
        width: 100px;
        display: inline-block;
    }

    .role-menu-tree-node .resources {
        flex: 1;
    }

    .role_set .tree-header {
        margin-top: 10px;
        display: flex;
        font-size: 14px;
        margin-bottom: 5px;
        padding: 5px;
        border-bottom: 1px solid #efefef;
    }

    .resources label.el-checkbox {
        float: left;
    }
</style>
<template>
    <el-drawer a="xxx"
               :title="role_code?'编辑权限':'添加权限'"
               :visible.sync="dialogVisible"
               :size="1000"
    >
        <el-form :model="role" :rules="rules" ref="roleForm" label-width="120px" size="small">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色编码" prop="code">
                <el-input v-model="role.code" placeholder="请输入角色编码，建议为名称的英文全拼"
                          :disabled="role_code?true:false"></el-input>
            </el-form-item>
            <el-form-item label="角色备注" prop="description">
                <el-input v-model="role.description" type="textarea" :rows="2" placeholder="请输入角色备注"></el-input>
            </el-form-item>
            <ly-form-group title="角色权限">
                <el-row :gutter="20">
                    <el-col :span="12" v-for="menu in menus">
                        <el-tree
                                node-key="code"
                                default-expand-all
                                :default-checked-keys="edit_default_resources"
                                :check-on-click-node="true"
                                label="name"
                                :ref="'tree'"
                                :expand-on-click-node="false"
                                :check-strictly="false"
                                :data="menu"
                                @check="checkChange"
                                :show-checkbox="true"
                                :props="roleTreeProps" style="margin-bottom: 80px;">
                                <span class="role-menu-tree-node" slot-scope="{ node, data }">
                                    <span class="node-name">{{ node.label }}</span>
                                    <span class="resources" v-show="data.resources" @click.stop="">
                                        <el-checkbox v-model="item.checked" :disabled="item.disabled"
                                                     v-for="item in data.resources" @change="resourcesChange(node)">{{item.name}}</el-checkbox>
                                    </span>
                                </span>
                        </el-tree>
                    </el-col>
            </ly-form-group>
        </el-form>

        <ly-drawer-footer>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </ly-drawer-footer>
    </el-drawer>
</template>
<script>
    Rap.define("", [], function () {
        return {
            props: {
                role_code: String
            },
            data: function () {
                return {
                    dialogVisible: false,
                    rules: {
                        name: [{
                            required: true,
                            message: '请输入角色名称',
                            trigger: 'blur'
                        }, {
                            min: 2,
                            message: '角色名称最少为两个字符',
                            trigger: 'blur'
                        }],
                        code: [{
                            required: true,
                            message: '请输入角色编码',
                            trigger: 'blur'
                        }, {
                            min: 4,
                            message: '角色编码最少为4个字符',
                            trigger: 'blur'
                        }]
                    },
                    menus: [],
                    role: {
                        name: '',
                        code: '',
                        description: '',
                        resources: []
                    },
                    edit_default_resources: [],
                    roleTreeProps: {
                        label: 'name'
                    },
                }
            },
            created: function () {
                if (this.role_code) {
                    var roles = localStorage.getItem('ly-test-roles');
                    roles = JSON.parse(roles);
                    this.role = _.indexBy(roles, 'code')[this.role_code];
                    if (this.role.resources) {
                        this.edit_default_resources = this.role.resources;
                    }
                }
                var me = this;
                axios.get('/portal/menu.json').then(function (rs) {
                    var data = rs.data;
                    var menus = [];
                    _.each(data, function (menu) {
                        menu.code = menu.category;
                        menu.children = menu.menus;
                        delete menu.menus;
                        menus.push([menu])
                    })

                    function checkResource(menus) {
                        if (!menus) return;
                        _.each(menus, function (child) {
                            if (child.resources) {
                                _.each(child.resources, function (resource) {
                                    resource.checked = me.edit_default_resources.indexOf(resource.code) > -1;
                                });
                            }
                            if (child.children) {
                                me.edit_default_resources.remove(child.code);
                            }
                            checkResource(child.children);
                        });
                    }

                    if (me.role_code) {
                        _.each(menus, function (menu) {
                            checkResource(menu);
                        });
                    }
                    me.menus = menus;
                });
            },
            methods: {
                onSubmit: function () {
                    var me = this;
                    this.$refs.roleForm.validate(function (valid) {
                        if (!valid) {
                            App.$message.error('请完善表单信息!');
                            return false;
                        }
                        var trees = me.$refs.tree;
                        if (!Array.isArray(trees)) {
                            trees = [trees];
                        }
                        var checked_all = [];
                        _.each(trees, function (tree) {
                            var checked = tree.getCheckedKeys();
                            var halfChecke = tree.getHalfCheckedKeys();
                            checked_all = checked_all.concat(checked.concat(halfChecke))
                        });

                        function checkResource(menus) {
                            if (!menus) return;
                            _.each(menus, function (child) {
                                if (child.resources) {
                                    _.each(child.resources, function (resource) {
                                        if (resource.checked) {

                                            checked_all.push(resource.code);
                                        }
                                    });
                                }
                                checkResource(child.children);
                            });
                        }
                        _.each(me.menus, function (menu) {
                            checkResource(menu);
                        });
                        me.role.resources = checked_all;
                        //模拟入库
                        var roles = localStorage.getItem('ly-test-roles');
                        roles = JSON.parse(roles);
                        var role_map = _.indexBy(roles, 'code');
                        //新增
                        if (!me.role_code) {
                            if (role_map[me.role.code]) {
                                App.$message({type: 'danger', message: '相同编码的权限已存在'});
                            }
                            roles.push(me.role);
                        } else {
                            _.extend(role_map[me.role.code], me.role);
                        }
                                                
                        localStorage.setItem('ly-test-roles', JSON.stringify(roles));
                        me.$emit('submit');
                        me.dialogVisible = false;
                    });
                }, checkChange: function (data, item) {
                    data.checked = item.checkedKeys.indexOf(data.code) > -1;
                    var checked = data.checked;
                    Vue.set(data, 'checked', data.checked);

                    function checkChildren(children) {
                        if (!children) return;
                        _.each(children, function (child) {
                            Vue.set(child, 'checked', checked);
                            if (child.resources) {
                                _.each(child.resources, function (resource) {
                                    Vue.set(resource, 'checked', checked);
                                });
                            }
                            checkChildren(child.children)
                        });
                    }

                    checkChildren(data.children)
                    if (data.resources) {
                        _.each(data.resources, function (resource) {
                            Vue.set(resource, 'checked', checked);
                        });
                    }
                }, resourcesChange: function (node) {
                    node.checked = false;
                    Vue.set(node.data, 'checked', false);
                    _.each(node.data.resources, function (resource) {
                        if (resource.checked) {
                            node.checked = true;
                            Vue.set(node.data, 'checked', true);
                        }
                    });
                }
            }
        }
    })
</script>